import "./style.scss";
import { Button, Col, Divider, Row } from "antd";
import USA_ICON from "@/assets/photos/country/美国.png";
import BD_ICON from "@/assets/photos/country/孟加拉.png";
import AL_ICON from "@/assets/photos/country/安圭拉.png";
import BR_ICON from "@/assets/photos/country/巴西.png";
import CM_ICON from "@/assets/photos/country/喀麦隆.png";
import IN_ICON from "@/assets/photos/country/印度.png";
import IT_ICON from "@/assets/photos/country/意大利.png";
import MY_ICON from "@/assets/photos/country/马来西亚.png";
import ZA_ICON from "@/assets/photos/country/南非.png";
import NG_ICON from "@/assets/photos/country/尼日利亚.png";
import BackgroundIcon from "@/assets/photos/country/world-map.png";
import { useTranslation } from "react-i18next";

const FifthHomePage = () => {
  const { t } = useTranslation();

  return (
    <div className="fifth-home-page-pc">
      <img src={BackgroundIcon} className="background"/>
      <Row className="row-one">
        <Col xs={24} sm={24} md={24} lg={24} xl={24}>
          <div className="title">{t("IntelligentTracking")}</div>
          <div className="title">
            <span>7X24</span>
            <span>{t("AutoTrading")}</span>
            </div>
        </Col>
      </Row>
      <Row className="countries">
        <Col className="country" xs={12} md={6} lg={4} xl={2} >
          <img src={USA_ICON} alt="" />
          <span>{t("USA")}</span>
        </Col>
        <Col className="country" xs={12} md={6} lg={4} xl={2} >
          <img src={BD_ICON} alt="" />
          <span>{t("BD")}</span>
        </Col>
        <Col className="country" xs={12} md={6} lg={4} xl={2} >
          <img src={AL_ICON} alt="" />
          <span>{t("AL")}</span>
        </Col>
        <Col className="country" xs={12} md={6} lg={4} xl={2} >
          <img src={BR_ICON} alt="" />
          <span>{t("BR")}</span>
        </Col>
        <Col className="country" xs={12} md={6} lg={4} xl={2} >
          <img src={CM_ICON} alt="" />
          <span>{t("CM")}</span>
        </Col>
        <Col className="country" xs={12} md={6} lg={4} xl={2} >
          <img src={IN_ICON} alt="" />
          <span>{t("IN")}</span>
        </Col>
      </Row>

      <Row className="countries two">
      <Col className="country" xs={12} md={6} lg={4} xl={2} >
        </Col>
      <Col className="country" xs={12} md={6} lg={4} xl={2} >
          <img src={IT_ICON} alt="" />
          <span>{t("IT")}</span>
        </Col>
        <Col className="country" xs={12} md={6} lg={4} xl={2} >
          <img src={MY_ICON} alt="" />
          <span>{t("MY")}</span>
        </Col>
        <Col className="country" xs={12} md={6} lg={4} xl={2} >
          <img src={ZA_ICON} alt="" />
          <span>{t("ZA")}</span>
        </Col>
        <Col className="country" xs={12} md={6} lg={4} xl={2} >
          <img src={NG_ICON} alt="" />
          <span>{t("NG")}</span>
        </Col>
        <Col className="country" xs={12} md={6} lg={4} xl={2} >
        </Col>
      </Row>


    </div>
  );
};

export default FifthHomePage;
